<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按下回车键显示输入内容</title>
</head>
<body>
<div id="change" class="change">
    <!--form 是定义表单，在用户输入完毕后进行提交。在提交后，一定会刷新页面。-->
    <!--<form action="#">
        <label for="username">用户名</label><input type="text" name="username" id="username">
    </form>-->
    <!--去掉 form 标签后，不进行页面的刷新-->
    <label for="username">用户名</label><input type="text" name="username" id="username">
</div>

<script !src="">
    let element = document.querySelector("#username");
    // element.addEventListener("keypress",function (event) {
    //     // event.preventDefault()
    //     if (event.key === 'Enter'){
    //         event.preventDefault()
    //         console.log(element.value);
    //     }
    //     // console.log(event);
    // })

    element.addEventListener("keyup", function (event) {
        event.preventDefault()
        if (event.key === 'Enter') {
            event.stopPropagation()
            // event.preventDefault()
            console.log(element.value);
        }
        // console.log(element.value);
    })
</script>
</body>
</html>